<template>	
	<div class="header"> 
		<div class="nav-topbar">
			<div class="container">
			 <div class="topbar-menu">
				 <a href="javascript:;">小米商城</a>
				 <a href="javascript:;">MIUI</a>
				 <a href="javascript:;">云服务</a>
				 <a href="javascript:;">协议规则</a>
			 </div>
			 <div class="topbar-user">
				<a href="javascript:;" v-if="username">{{username}}</a>
				<a href="javascript:;" v-if="!username" @click="login()">登录</a>
				<a href="javascript:;" v-if="!username" @click="logout()">退出</a>
				 <a href="javascript:;">我的订单</a>
				 <a href="javascript:;" class="my-cart" @click="goToCart()">
					 <span class="icon-cart">
					 </span>
					 购物车({{cartCount}})
				</a>
			 </div>
			</div>	
		</div>
		<div class="nav-header">
			<div class="container">
				<div class="header-logo">
					<a href="/#/index"></a>
				</div>
				<div class="header-menu">
					<div class="item-menu">
						<span>小米手机</span>
						<div class="children">
							<ul>
								<li class="product" v-for="(item,index) in phoneList" :key="index">
									<!--v-for指令是循环默认数组,index是数组索引，key可以提高渲染速率,复用率高，二次渲染的时候会自动缓存，不会重复渲染，而是直接去取-->
									<a v-bind:href="'/#/product/'+item.id" target="_blank">
										<!--v-bind绑定href的属性-，可以简写成：-->
										<div class="pro-img">
											
											<img v-lazy="item.mainImage" :alt="item.subtitle">
										</div>
										<div class="pro-name">{{item.name}}</div>
										<div class="pro-price">{{item.price | currency}}</div>
									</a>
								</li>
					
							</ul>
						</div>
					</div>
					<div class="item-menu">
						<span>RedMi红米</span>
						<div class="childern"></div>
					</div>
					<div class="item-menu">
						<span>电视</span>
						<div class="children">
							<ul>
								<li class="product">
									<a href="" target="_blank">
										<div class="pro-img">
											<img v-lazy="'/imgs/nav-img/nav-3-1.jpg'">
										</div>
										<div class="pro-name">小米壁画电视</div>
										<div class="pro-price">6999元</div>
									</a>
								</li>
								<li class="product">
									<a href="" target="_blank">
										<div class="pro-img">
											<img v-lazy="'/imgs/nav-img/nav-3-2.jpg'">
										</div>
										<div class="pro-name">小米全面屏电视E55A</div>
										<div class="pro-price">1999元</div>
									</a>
								</li>
								<li class="product">
									<a href="" target="_blank">
										<div class="pro-img">
											<img v-lazy="'/imgs/nav-img/nav-3-3.png'">
										</div>
										<div class="pro-name">小米电视4A 32英寸</div>
										<div class="pro-price">699元</div>
									</a>
								</li>
								<li class="product">
									<a href="" target="_blank">
										<div class="pro-img">
											<img v-lazy="'/imgs/nav-img/nav-3-4.jpg'">
										</div>
										<div class="pro-name">小米电视4A 55英寸</div>
										<div class="pro-price">1799元</div>
									</a>
								</li>
								<li class="product">
									<a href="" target="_blank">
										<div class="pro-img">
											<img v-lazy="'/imgs/nav-img/nav-3-5.jpg'">
										</div>
										<div class="pro-name">小米电视4A 65英寸</div>
										<div class="pro-price">2699元</div>
									</a>
								</li>
								<li class="product">
									<a href="" target="_blank">
										<div class="pro-img">
											<img v-lazy="'/imgs/nav-img/nav-3-6.png'">
										</div>
										<div class="pro-name">查看全部</div>
										<div class="pro-price">小米电视</div>
									</a>
								</li>
							</ul>
						</div>
						
					</div>
				</div>
				<div class="header-search">
					<div class="wrapper">
						<input type="text" name="keyword">
						<a href="javascript:;"></a>
					</div>
				</div>
			</div>	
		
		</div>
	</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
	name:'nav-header',
	data(){//局部的
	return{
		phoneList:[],
		//username:this.$store.state.username,
	}
	},
	computed:{
		// username(){
		// 	return this.$store.state.username
		// },
		// cartCount(){
		// 	return this.$store.state.cartCount
		// }
		...mapState(['username','cartCount'])
	},
	filters:{
		currency(val){
			if(!val)return '0.00';
			return '￥' + val.toFixed(2) + '元';//四舍五入2位
		}
	},
	mounted() {
		this.getProductList();
		let params=this.$router.params;
		if( params&&params.from == 'login'){
			this.getCartCount();
		}
		
	},
	methods: {
		login(){
			this.$router.push('/login');
		},
		logout(){
			this.axios.post('/user/logout').then(()=>{
				this.$message.success('退出成功');
				this.$cookie.set('userId','',{expires:'-1'});
				this.$store.dispatch('saveUserName','');
				this.$store.dispatch('saveCartCount','0');
			})

		},
		 getCartCount(){
      this.axios.get('/carts/products/sum').then((res=0)=>{
        this.$store.dispatch('saveCartCount',res);

        
      })
    },
		getProductList(){
			this.axios.get('/products',{//get方式用params传参，post传参直接写
				params:{
					categoryId:'100012',
					pageSize:6
				}
			}).then((res)=>{//then来链式调用，这里的res是data里面的数据，不含status
				/*if(res.list.length>=6)
				{
					this.phoneList=res.list.slice(0,6);//通过slice进行数组截取，截取6条数据
				}*/
				this.phoneList=res.list;
			}

			)
		},
		goToCart(){
			this.$router.push('/cart');//路由跳转
		}
	},

	
}
</script>
<style lang="scss">
	@import './..//assets/scss/base.scss';
	@import './..//assets/scss/mixin.scss';
	@import './..//assets/scss/config.scss';
	.header{
		.nav-topbar{
			height: 39px;
			line-height: 39px;
			background-color: #333333;
			color: #B0B0B0;
			.container{
				@include flex();//调用在mixin里的flrx()方法
		
			a{
				display: inline-block;
				margin-right:17px ;
				color:#B0B0B0;
			}
			.my-cart{
				width:110px;
				background-color: #FF6600;
				text-align: center;//居中
				margin-right:0;
				color: #ffffff;
				.icon-cart{
					@include bgImg(16px,12px,'/imgs/icon-cart-checked.png');
					margin-right: 4px;
				}
			}

		}
		
		}
		.nav-header{
			.container{
				position: relative;
				height: 112px;
				@include flex();//调用在mixin里的flex()方法
				
				.header-menu{
					display: inline-block;
					padding-left: 209px;
					width:643px;
					.item-menu{
						display:inline-block;//横着排
						color:#333333;
						font-weight: bold;
						font-size: 16px;
						line-height: 112px;
						margin-right: 20px;
						span{
							cursor: pointer;
						}
						&:hover{
							color:$colorA;
							.children{
								height: 220px;
								opacity: 1;
							}
						}
						.children{
							//display:inline-block;//横着排
							position: absolute;
							top:112px;
							left:0;
							width:1226px;
							height: 0;
							opacity: 0;//透明度
							overflow:hidden;
							border-top:1px solid #E5E5E5;
							box-shadow:0px 7px 6px 0px rgba(0,0,0,0.11);
							z-index: 10;
							transition:all;//所有属性都会做动画
    						background-color: #ffffff;
							
							.product{
								position: relative;//绝对定位
								float:left;//使li标签横排
								width:16.6%;
								height: 220px;
								font-size: 12px;
								line-height:12px ;
								text-align: center;
								a{
									display: inline-block;//使元素横向排列
								}
								img{
									height: 111px;
									width:auto;
									margin-top: 26px;
								}
								.pro-img{
									height:137px;
								}
								.pro-name{
									font-weight: bold;
									margin-top: 19px;
									margin-bottom:8px;
									color:$colorB;
								}
								.pro-price{
									color:$colorA
								}
								&:before{//一个伪类，用来加分割线
								content:'';//用来占位
								position:absolute;
								top:28px;
								right:0;
								border-left:1px solid $colorF;
								height:100px;
								width:1px;
							}
							&:last-child:before{
								display:none;
							}
							}

						}


					}
				}
				.header-search{
					width: 319px;
					.wrapper{
						height: 50px;
						border: 1px solid #E0E0E0;
						display: flex;
						align-items: center;
						input{
							border:none;
							box-sizing: border-box;
							border-right: 1px solid #E0E0E0;
							width:264px;
							height: 50px;
							padding-left: 14px;
						}
						a{
							@include bgImg(18px,18px,'/imgs/icon-search.png');
							margin-left: 17px;
						}
					}
				}
			}
			
		}
		
		
	}

</style>
	
	
	

